{% extends "base.html" %}

{% block title %}管理后台 - 个人博客{% endblock %}

{% block content %}
<div class="flex justify-between items-center mb-8">
    <h1 class="text-3xl font-bold text-gray-800">管理后台</h1>
    <button onclick="toggleAddForm()" 
            class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition duration-300">
        <i class="fas fa-plus mr-2"></i>添加文章
    </button>
</div>

<!-- 添加文章表单 -->
<div id="addForm" class="hidden bg-white rounded-lg shadow-md p-6 mb-8">
    <h2 class="text-xl font-bold text-gray-800 mb-4">添加新文章</h2>
    <form action="{{ url_for('add_article') }}" method="POST" class="space-y-4">
        <div>
            <label for="title" class="block text-sm font-medium text-gray-700 mb-1">标题</label>
            <input type="text" id="title" name="title" required
                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
        </div>
        <div>
            <label for="content" class="block text-sm font-medium text-gray-700 mb-1">内容</label>
            <textarea id="content" name="content" rows="10" required
                      class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
        </div>
        <div class="flex space-x-4">
            <button type="submit" 
                    class="bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 transition duration-300">
                <i class="fas fa-save mr-2"></i>保存
            </button>
            <button type="button" onclick="toggleAddForm()"
                    class="bg-gray-500 text-white px-4 py-2 rounded-md hover:bg-gray-600 transition duration-300">
                <i class="fas fa-times mr-2"></i>取消
            </button>
        </div>
    </form>
</div>

<!-- 文章列表 -->
{% if articles %}
    <div class="bg-white rounded-lg shadow-md">
        <table class="w-full">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">标题</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">发布时间</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-200">
                {% for article in articles %}
                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm font-medium text-gray-900">{{ article[1] }}</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ article[3] }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                            <button onclick="editArticle({{ article[0] }}, '{{ article[1] }}', '{{ article[2] }}')"
                                    class="text-blue-600 hover:text-blue-900 mr-3">
                                <i class="fas fa-edit mr-1"></i>编辑
                            </button>
                            <form action="{{ url_for('delete_article', article_id=article[0]) }}" method="POST" 
                                  style="display: inline;" onsubmit="return confirm('确定要删除这篇文章吗？')">
                                <button type="submit" class="text-red-600 hover:text-red-900">
                                    <i class="fas fa-trash mr-1"></i>删除
                                </button>
                            </form>
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
{% else %}
    <div class="text-center py-12">
        <i class="fas fa-blog text-6xl text-gray-300 mb-4"></i>
        <h3 class="text-xl text-gray-500 mb-2">暂无文章</h3>
        <p class="text-gray-400">点击"添加文章"按钮创建第一篇博客</p>
    </div>
{% endif %}

<!-- 编辑文章模态框 -->
<div id="editModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full">
    <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 shadow-lg rounded-md bg-white">
        <div class="mt-3">
            <h3 class="text-lg font-medium text-gray-900 mb-4">编辑文章</h3>
            <form id="editForm" method="POST" class="space-y-4">
                <input type="hidden" id="editArticleId" name="article_id">
                <div>
                    <label for="editTitle" class="block text-sm font-medium text-gray-700 mb-1">标题</label>
                    <input type="text" id="editTitle" name="title" required
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label for="editContent" class="block text-sm font-medium text-gray-700 mb-1">内容</label>
                    <textarea id="editContent" name="content" rows="10" required
                              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                </div>
                <div class="flex space-x-4">
                    <button type="submit" 
                            class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition duration-300">
                        <i class="fas fa-save mr-2"></i>更新
                    </button>
                    <button type="button" onclick="closeEditModal()"
                            class="bg-gray-500 text-white px-4 py-2 rounded-md hover:bg-gray-600 transition duration-300">
                        <i class="fas fa-times mr-2"></i>取消
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function toggleAddForm() {
    const form = document.getElementById('addForm');
    form.classList.toggle('hidden');
}

function editArticle(id, title, content) {
    document.getElementById('editArticleId').value = id;
    document.getElementById('editTitle').value = title;
    document.getElementById('editContent').value = content;
    document.getElementById('editForm').action = `/edit_article/${id}`;
    document.getElementById('editModal').classList.remove('hidden');
}

function closeEditModal() {
    document.getElementById('editModal').classList.add('hidden');
}
</script>
{% endblock %}
